<template>
  <div class="view" :style="{'height':windowsHeight+'px','width':windowswidth+'px'}">
    <div class="login" :style="{'margin-top':(windowsHeight-500)/2.5+'px' }">
      <h2>网页收藏夹登录</h2>
      <a-input v-model="loginArgs.useraccount" style="width:90%;margin-top: 20px;" placeholder="请输入账号" allow-clear>
        <template #prefix>
          <icon-user/>
        </template>
      </a-input>
      <a-input-password
          style="width:90%;margin-top: 20px;"
          v-model="loginArgs.password"
          placeholder="请输入密码"
          :defaultVisibility="false"
          allow-clear>
        <template #prefix>
          <icon-safe/>
        </template>
      </a-input-password>
      <a-button type="primary" @click="login" style="width: 90%;margin-top: 30px;">登 录</a-button>
      <div class="menuicon">
        <a-row class="grid-demo">
          <a-col :span="12">
            <div>
              <a-link href="link">忘记密码？</a-link>
            </div>
          </a-col>
          <a-col :span="12">
            <div>
              <a-link href="link">我要注册！</a-link>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import UseWindowsInfo from "../../hooks/UseWindowsInfo";
import {onMounted, reactive} from "vue";
import CXMessageUtils from '../../common/Utils/CXMessageUtils'
import {RequestUtils} from "../../common/Utils/RequestUtils";
import useUserInfo from "../../hooks/UseUserInfo";
import {UserInfoType} from "../../common/Type/UserInfoType";
import route from "../../route";

// 窗口信息
const {windowsHeight, windowswidth} = UseWindowsInfo()
// 消息提示
const {CX_Warning,CX_Success} = CXMessageUtils
const {setUserInfo,userinfo,logOut} = useUserInfo()
// 登录的参数
const loginArgs = reactive({
  useraccount: '',
  password: ""
})


/**
 * 登录
 */
const login = ():void => {
  if (!loginArgs.useraccount){
    CX_Warning("请填写账号")
    return
  }
  if (!loginArgs.password){
    CX_Warning("请填写密码")
    return
  }
  RequestUtils({
    url:`User/Login`,
    method:'post',
    data:loginArgs
  }).then(data=>{
    const d:unknown = data
    setUserInfo(d as UserInfoType)
    CX_Success("登录成功")
  })
}

onMounted(()=>{
  if (userinfo.value.token){
    // 校验用户登录是否过期
    RequestUtils({
      url:`User/CheckLogin`,
      method:'post',
    }).then(()=>{
      route.push({name: 'index'})
    }).catch(err=>{
      if (err==="登录过期，请重新登录")
        logOut()
    })
  }
})
</script>

<style lang="less" scoped>
.view {
  overflow-x: hidden;
  overflow-y: auto;

  .login {
    padding: 20px 10px;
    width: 400px;
    height: 500px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 100px auto;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    text-align: center;

    .menuicon {
      text-align: center;
      margin: 10px;
    }
  }
}
</style>
